<!DOCTYPE html>
<html>
<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="utf-8">
    <title>编辑资源</title>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <!-- 引入 css -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

    <script src="static/js/vue.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>
    <style>
        header {
            /* background-color: #333; */
            background: #1d213d;
            color: #fff;
            padding: 10px;
            text-align: center;
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
        }

        header img{
            height: 100%; /* 图片高度与header高度相同 */
            width: 400px;
            padding: 0 10px; /* 可以根据需要调整图片与标题之间的间距 */
        }
        header h1 {
            flex: 0.63; /* 让标题占据剩余的空间，实现标题居中 */
            text-align: center; /* 水平居中 */
            color: #fff; /* 设置标题颜色为白色 */
            margin: 0; /* 去掉默认的margin */
        }

        #title{
            display: block;
            font-size: 2.1em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        .textdiv{
            margin-top: 10px;
            width: 90%;
            margin-left: 5%;
        }
        #resourcetitle,#resourceurl{
            width: 50%;
            height: 35px;
        }
        #savebtn{
            width: 85%;
            border-radius: 3px;
            background-color: black;
            color: white;
            margin-left: 6%;
            height: 35px;
        }
        #savebtn:hover {
            background-color: #1C1C1C;  /* 鼠标悬停时修改按钮的背景颜色 */
        }
        .bodydiv{
            padding-top: 130px;
            height: 100%;
        }


        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container { height: 300px; }


    </style>
</head>
<body style="width: 100%;height: 100%;overflow: hidden;margin: 0px">
<div style="width: 100%;">
    <div style="position: fixed;width: 100%;">
        <header>
            <img src="static/images/logo.png" id="logo" style="float: left;" alt="梦寒君资源">
            <h1 id="title">编辑资源</h1>
        </header>
    </div>
</div>
<div id="bodydiv" class="bodydiv">

    <div style="margin-left: 20px;margin-right: 20px">
        <el-form label-position="left" label-width="80px" :model="resource">
            <el-form-item label="资源标题">
                <el-input v-model="resource.title"></el-input>
            </el-form-item>

            <el-form-item label="资源链接">
                <el-input v-model="resource.url"></el-input>
            </el-form-item>

            <el-form-item label="资源等级">
                <el-select v-model="resource.level+''" placeholder="资源等级">
                    <el-option label="免费" value="0"></el-option>
                    <el-option label="会员" value="1"></el-option>
                    <el-option label="付费" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="资源类型">
                <el-row>
                    <el-select v-model="resource.type" placeholder="资源类型">
                        <el-option v-for="type in typeList" :label="type.title" :value="type.value"></el-option>
                    </el-select>
                    <el-button plain @click="initEditCover">编辑封面</el-button>
                </el-row>
            </el-form-item>

            <el-form-item label="资源详情">
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </el-form-item>
        </el-form>
    </div>

    <div style="margin-top: 10px;">
        <input type="button" value="保存" id="savebtn" @click="editresource">
    </div>


    <el-dialog title="设置封面" :visible.sync="dialogFormVisible">
        <el-form  :inline="true" :model="coverFrom" >
            <el-form-item label="封面内容" :label-width="formLabelWidth">
                <el-input v-model="coverFrom.text" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="封面颜色" :label-width="formLabelWidth">
                <el-color-picker v-model="coverFrom.color"></el-color-picker>
            </el-form-item>
            <el-form-item label="封面宽度" :label-width="formLabelWidth">
                <el-input v-model="coverFrom.width" autocomplete="off" placeholder="请输入封面宽度"></el-input>
            </el-form-item>
            <el-form-item label="封面长度" :label-width="formLabelWidth">
                <el-input v-model="coverFrom.height" autocomplete="off" placeholder="请输入封面长度"></el-input>
            </el-form-item>
            <el-form-item label="字体风格" :label-width="formLabelWidth">
                <el-select v-model="coverFrom.fontType" placeholder="请选择字体风格">
                    <el-option label="仿宋" value="仿宋"></el-option>
                    <el-option label="华文中宋" value="华文中宋"></el-option>
                    <el-option label="华文仿宋" value="华文仿宋"></el-option>
                    <el-option label="华文宋体" value="华文宋体"></el-option>
                    <el-option label="华文彩云" value="华文彩云"></el-option>
                    <el-option label="华文新魏" value="华文新魏"></el-option>
                    <el-option label="华文楷体" value="华文楷体"></el-option>
                    <el-option label="华文琥珀" value="华文琥珀"></el-option>
                    <el-option label="华文细黑" value="华文细黑"></el-option>
                    <el-option label="华文行楷" value="华文行楷"></el-option>
                    <el-option label="华文隶书" value="华文隶书"></el-option>
                    <el-option label="宋体" value="宋体"></el-option>
                    <el-option label="幼圆" value="幼圆"></el-option>
                    <el-option label="微软雅黑" value="微软雅黑"></el-option>
                    <el-option label="微软雅黑 Light" value="微软雅黑 Light"></el-option>
                    <el-option label="新宋体" value="新宋体"></el-option>
                    <el-option label="方正姚体" value="方正姚体"></el-option>
                    <el-option label="方正舒体" value="方正舒体"></el-option>
                    <el-option label="楷体" value="楷体"></el-option>
                    <el-option label="汉仪中黑 197" value="汉仪中黑 197"></el-option>
                    <el-option label="等线" value="等线"></el-option>
                    <el-option label="等线 Light" value="等线 Light"></el-option>
                    <el-option label="隶书" value="隶书"></el-option>
                    <el-option label="黑体" value="黑体"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="字体样式" :label-width="formLabelWidth">
                <el-select v-model="coverFrom.fontStyle" placeholder="请选择字体样式">
                    <el-option label="无" value="PLAIN"></el-option>
                    <el-option label="粗体" value="BOLD"></el-option>
                    <el-option label="斜体" value="ITALIC"></el-option>
                    <el-option label="粗斜体" value="BOLD_ITALIC"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="字体大小" :label-width="formLabelWidth">
                <el-input v-model="coverFrom.fontSize" autocomplete="off" placeholder="请输入字体大小"></el-input>
            </el-form-item>
            <el-form-item label="字体颜色" :label-width="formLabelWidth">
                <el-color-picker v-model="coverFrom.fontColor"></el-color-picker>
            </el-form-item>
        </el-form>
        <div>
            <span>原封面:</span>
            <image :src="resource.cover" style="max-height: 200px;max-width: 400px;width: 100%" v-if="resource.cover!=''"/>
        </div>
        <div>
            <span>自定义上传封面：</span>
            <el-upload
                    class="upload-demo"
                    drag
                    action="resources/admin/uplaodCover"
                    :data="coverData"
                    :headers="coverHeader"
                    :on-success="uploadCover"
                    show-file-list="false"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg文件</div>
            </el-upload>
        </div>
        <div style="margin-top: 10px">
            <span>预览区域:</span>
            <image :src="coverUrl" style="max-height: 200px;max-width: 400px;width: 100%" v-if="coverUrl!=''"/>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="info" @click="createCover">预 览</el-button>
            <el-button type="primary" @click="editCover">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>

    var username = localStorage.getItem("username");
    var token = localStorage.getItem("token");
    var userid = localStorage.getItem("userid");

    var searchParams = new URLSearchParams(window.location.search);
    var resid = searchParams.get('resid').toString();


    new Vue({
        el: '#bodydiv',
        data: {
            typeList:null,
            resource: {
                resourceId:null,//ID
                title: null,//标题
                url: null,//URL
                description: null,//资源描述
                type: null,//类型
                level: null,//资源等级
                uploaderId: null,//上传人
                cover:null
            },
            dialogFormVisible:false,
            formLabelWidth: '120px',
            coverFrom:{
                text:'',fontType:'',fontStyle:'',fontSize:20,fontColor:'#FFFFFF',color:'#000000',width:400,height:200
            },
            coverUrl:'',//封面预览url
            coverData:{//上传封面携带的参数
                resourceId:resid,
                tmpFlag:"Y"
            },
            coverHeader:{//上传文件携带的token
                "Authorization": token
            }
        },
        methods: {
            /**
             * 上传封面成功
             * @param response
             * @param file
             * @param fileList
             */
            uploadCover(response, file, fileList){
                if(response.code==200){
                    this.coverUrl = response.data+'?r='+ Math.random();
                }else{
                    this.$message({
                        message: response.msg,
                        type: 'warning'
                    });
                }
            },
            /**
             * 打开编辑封面
             */
            initEditCover(){
                this.dialogFormVisible = true;
                this.coverFrom.text = this.resource.title;
            },
            /**
             * 更新封面
             */
            editCover(){
                if(this.coverUrl==null||this.coverUrl==''){
                    this.$message({
                        message: '请先生成封面！',
                        type: 'warning'
                    });
                    return;
                }
                this.dialogFormVisible = false;
                this.resource.cover = this.coverUrl.replace(/\?.*$/, "");
            },
            /**
             * 创建封面
             */
            createCover(){
                if(this.coverFrom.text==null||this.coverFrom.text==''){
                    this.$message({
                        message: '封面内容不能为空！',
                        type: 'warning'
                    });
                    return;
                }
                this.coverFrom.fontColor = this.coverFrom.fontColor.replace("#","%23");
                this.coverFrom.color = this.coverFrom.color.replace("#","%23");
                axios.get('resources/admin/createResourceCover?text='+this.coverFrom.text+'&resourceId='+resid+'&fontType='+this.coverFrom.fontType
                    +'&fontStyle='+this.coverFrom.fontStyle+'&fontSize='+this.coverFrom.fontSize+'&fontColor='+this.coverFrom.fontColor
                    +'&color='+this.coverFrom.color+'&width='+this.coverFrom.width+'&height='+this.coverFrom.height+'&tmpFlag=Y', {headers: {"Content-Type": "application/json","Authorization": token}}).then(resp => {
                    if (resp.data.code != 200) {
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.coverUrl = resp.data.data+'?r='+ Math.random();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            init() {
                axios.get('resources/admin/getResourceById?resourceId='+resid, {headers: {"Content-Type": "application/json","Authorization": token}}).then(resp => {
                    if (resp.data.code != 200) {
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    } else {
                        var data = resp.data.data;
                        editor.setHtml(data.description)
                        this.resource.title = data.title;
                        this.resource.url = data.url;
                        this.resource.type = data.type;
                        this.resource.level = data.level;
                        this.resource.cover = data.cover+'?r='+ Math.random();
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /**
             * 编辑资源
             */
            editresource(){
                this.resource.description = editor.getHtml();
                this.resource.resourceId = resid;
                axios.post('resources/admin/updateResource',this.resource, {headers: {"Content-Type": "application/json",
                        "Authorization": token}}).then(resp => {
                    if (resp.data.code != 200) {
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: '操作成功！',
                            type: 'success'
                        });
                        setTimeout(function (){
                            location.reload();
                        }, 2000);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            initType(){
                axios.get('bar/initType',{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        //初始化数据
                        this.init();
                        this.typeList = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        },
        created() {
            this.initType();
        }
    })
    
    // 检测用户是否使用移动设备
    function isMobileDevice() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    var screenHeight = window.innerHeight;
    // 如果是移动设备，则调整 div 的 padding
    if (isMobileDevice()) {
        document.getElementById("title").style.display = "none";
    }





    var { createEditor, createToolbar } = window.wangEditor

    var editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            var html = editor.getHtml()
        },
        MENU_CONF: {}
    }
    editorConfig.MENU_CONF['codeSelectLang'] = {
        // 代码语言
        codeLangs: [
            {text:"CSS",value:"css"},{text:"HTML",value:"html"},{text:"XML",value:"xml"},{text:"Javascript",value:"javascript"},{text:"Typescript",value:"typescript"},{text:"JSX",value:"jsx"},{text:"Go",value:"go"},{text:"PHP",value:"php"},{text:"C",value:"c"},{text:"Python",value:"python"},{text:"Java",value:"java"},{text:"C++",value:"cpp"},{text:"C#",value:"csharp"},{text:"Visual Basic",value:"visual-basic"},{text:"SQL",value:"sql"},{text:"Ruby",value:"ruby"},{text:"Swift",value:"swift"},{text:"Bash",value:"bash"},{text:"Lua",value:"lua"},{text:"Groovy",value:"groovy"},{text:"Markdown",value:"markdown"}
            // 其他
        ]
    }

    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'resources/admin/uploadResourceImage?resourceId='+resid,
        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
        fieldName: 'file',

        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 5 * 1024 * 1024,

        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 100,

        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*'],

        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。

        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,

        meta: {
            resourceId: resid
        },

        // 自定义增加 http  header
        headers: {
            'Authorization': token
        },

        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,

        // 超时时间，默认为 10 秒
        timeout: 5 * 1000, // 5 秒
    }

    var editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    var toolbarConfig = {}

    var toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })




</script>
</html>